<template>
  <div class="page_padding">
    <MyNavBar :gobackShow="false" :title="title" />
    <div class="content">
      <!-- 用户信息 -->
      <div class="user">
        <div class="user-head">
          <van-image
            class="user-icon"
            :src="userInfo.headUrl"
            round
            width="45px"
            height="45px"
            fit="cover"
            v-if="userInfo && userInfo.headUrl"></van-image>
          <van-image
            class="user-icon"
            :src="userInfo.gender === '2' ? circleUrlW : circleUrlM"
            round
            width="45px"
            height="45px"
            fit="cover"
            v-else></van-image>
        </div>
        <div class="user_info">
          <div class="user_name">
            {{ userInfo.userName }}
          </div>
          <div class="user_post">
            <span class="post">{{ userInfo.loginPostInfo.orgName }}</span>
            <!-- <span class="line">|</span> -->
            <!-- <span>{{ userInfo.loginPostInfo.postName }}</span> -->
          </div>
          <!-- <div class="user_post">
            <span>{{ userInfo.loginPostInfo.orgName }}</span>
            <span class="line">|</span>
            <span>{{ userInfo.loginPostInfo.postName }}</span>
          </div> -->
        </div>
        <vip-day class="vip-center" v-if="isAdminRole"></vip-day>
      </div>
      <div class="fun">
        <div class="fun_list" v-for="(item, index) in funList" :key="index" @click="goFunDetail(item)">
          <div class="list_name">{{ item.name }}</div>
          <div class="list_icon"><van-icon name="arrow" color="#333" /></div>
        </div>
      </div>
      <div @click="signOut" class="sign_out">退出</div>
    </div>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import VipDay from '@com/VipDay.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'My',
  components: { MyNavBar, VipDay },
  props: {},
  data() {
    return {
      title: '我的',
      userInfo: JSON.parse(localStorage.userInfo),
      opinionUrl: '/opinionList',
      funList: [
        { name: '隐私政策', url: '/privacy', id: 0 },
        { name: '用户服务协议', url: '/privacy', id: 6 },
        // { name: '操作手册', url: '/privacy', id: 1, edition: true },
        // { name: '版本说明', url: '/version', id: 2 },
        { name: '修改密码', url: '/password', id: 5 },
      ],
      production: config.production,
      quitTime: null,
      circleUrlM: require('@images/user-icon.png'),
      circleUrlW: require('@images/user-icon-G.png'),
    }
  },
  computed: {
    ...mapGetters('role', ['isAdminRole', 'isMainRole', 'isOrgRole', 'leftNavMenus']),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goback() {
      this.$router.go(-1)
    },
    /**
     * identity_keyuan 科员
      identity_kezhang 科长
      identity_window_member 窗口工作人员
      identity_window_leader 窗口负责人
     */
    goFunDetail(item) {
      if (!item.url) return this.$toast.fail('系统建设中')
      if (item.edition) {
        // 操作手册点击跳转判断
        let identity = 1
        this.$router.push({
          path: item.url,
          query: {
            index: identity,
            title: item.name,
          },
        })
      } else {
        console.log(item)
        this.$router.push({
          path: item.url,
          query: {
            index: item.id,
            title: item.name,
          },
        })
      }
    },
    signOut() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '您确定要退出当前账号吗？',
        })
        .then(() => {
          if (!['flutter-android', 'flutter-ios', 'flutter'].includes(localStorage.platform)) {
            localStorage.clear()
            sessionStorage.clear()
            this.$router.push('/login')
          } else {
            localStorage.clear()
            sessionStorage.clear()
            window.flutter_inappwebview.callHandler('logOut', '')
          }
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.page_padding {
  .content {
    padding: 0 0 51px;
    height: 100%;
    overflow: auto;
    background-color: #f5f5f5;
    // 用户信息
    .user {
      display: flex;
      padding: 32px 16px;
      border-bottom: 1px solid #dedede;
      background-color: #fff;
      align-items: center;
      background-image: url('../../assets/images/home/home-bg.png');
      background-repeat: no-repeat;
      background-size: 100% auto;

      .user_info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #ffffff;
        padding-left: 10px;

        .user_name {
          font-weight: bold;
          margin-bottom: 8px;
        }

        .user_post {
          font-size: 12px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .line {
            margin: 0 5px;
            color: rgba($color: #333, $alpha: 0.4);
          }
          .post {
            margin-right: 12px;
          }
        }
      }
    }

    // 功能
    .fun {
      margin-top: 15px;
      background-color: #fff;
      padding: 0 12px;
      box-shadow: 0px 0px 10px 1px rgba(95, 95, 95, 0.1);
      border-radius: 8px;
      .fun_list {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        color: #333;
        border-bottom: 1px solid #dedede;
        &:last-child {
          border-bottom: none;
        }
        .list_icon {
          font-size: 14px;
        }
      }
    }

    .sign_out {
      cursor: pointer;
      text-align: center;
      padding: 12px;
      background-color: #fff;
      margin: 150px 16px 0;
      box-shadow: 0px 0px 10px 1px rgba(95, 95, 95, 0.1);
      border-radius: 40px;
      color: #7f7f7f;
    }
  }
}
</style>
